<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="../css/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../css/citysearch.css">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/footer.css">
</head>

<body>
    <header>
        <div class="container head">
            <div class="logo">
                <img src="../images/header/logo.png" alt="">
            </div>
            <div class="header_btn">
                <ul>
                    <li><a href="../index.html"> 首页 </a></li>
                    <li>|</li>
                    <li><a href="../page/location.html"> 旅游城市 </a></li>
                    <li>|</li>
                    <li><a href="../page/type.html"> 各色美景 </a></li>
                    <li>|</li>
                    <li><a href="../page/"> 打卡胜地 </a></li>
                </ul>
            </div>
            <div class="header_icon">
                <ul>
                    <li><a href="" class="fa fa-qq"></a></li>
                    <li>|</li>
                    <li><a href="" class="fa fa-weixin"></a></li>
                </ul>
            </div>
        </div>
    </header>
    <section class="banner">
        <div class="container display-flex justify-center justify-wrap  align-start" style="height: 450px;">
            <h1> <b> 世界那么大，你要去看看</b></h1>
            <div class="city_search">
                <input type="text" placeholder="请输入城市名称">
                <div class="search_icon text-center">
                    <span> <i class="fa fa-search"></i><b>搜索</b> </span>
                </div>
            </div>
        </div>
    </section>
    <section class="hot_city margin-top">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h2>
                        热门城市一览
                    </h2>
                </div>
                <div class="row">
                    <div class="col-sm-3">
                        <div class="city-item ">
                            <img src="../images/citysearch/chengdu.jpg" alt="" class="city-img">
                            <div class="style">
                                <img src="../images/citysearch/tubiao.png" alt="" class="nav">
                                <div class="introduce text-center ">
                                    <h2><i class="fa  fa-map-marker"></i>成都</h2>
                                    <p>休闲之都</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="city-item ">
                            <img src="../images/citysearch/hangzhou.jpg" alt="" class="city-img">
                            <div class="style">
                                <img src="../images/citysearch/tubiao.png" alt="" class="nav">
                                <div class="introduce text-center">
                                    <h2><i class="fa  fa-map-marker"></i>杭州</h2>
                                    <p>人间天堂</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="city-item ">
                            <img src="../images/citysearch/beijing.jpg" alt="" class="city-img">
                            <div class="style">
                                <img src="../images/citysearch/tubiao.png" alt="" class="nav">
                                <div class="introduce text-center">
                                    <h2><i class="fa  fa-map-marker"></i>北京</h2>
                                    <p>京城风华</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="city-item ">
                            <img src="../images/citysearch/sanya .jpg" alt="" class="city-img">
                            <div class="style">
                                <img src="../images/citysearch/tubiao.png" alt="" class="nav">
                                <div class="introduce text-center">
                                    <h2><i class="fa  fa-map-marker"></i>三亚</h2>
                                    <p>热带风情</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3">
                        <div class="city-item ">
                            <img src="../images/citysearch/shuzou.jpg" alt="" class="city-img">
                            <div class="style">
                                <img src="../images/citysearch/tubiao.png" alt="" class="nav">
                                <div class="introduce text-center">
                                    <h2><i class="fa  fa-map-marker"></i>苏州</h2>
                                    <p>园林之城</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="city-item ">
                            <img src="../images/citysearch/dali.jpg" alt="" class="city-img">
                            <div class="style">
                                <img src="../images/citysearch/tubiao.png" alt="" class="nav">
                                <div class="introduce text-center">
                                    <h2><i class="fa  fa-map-marker"></i>大理</h2>
                                    <p>风花雪月</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="city-item ">
                            <img src="../images/citysearch/xian.jpg" alt="" class="city-img">
                            <div class="style">
                                <img src="../images/citysearch/tubiao.png" alt="" class="nav">
                                <div class="introduce text-center">
                                    <h2><i class="fa  fa-map-marker"></i>西安</h2>
                                    <p>长安八景</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="city-item ">
                            <img src="../images/citysearch/shanghai.jpg" alt="" class="city-img">
                            <div class="style">
                                <img src="../images/citysearch/tubiao.png" alt="" class="nav">
                                <div class="introduce text-center">
                                    <h2><i class="fa  fa-map-marker"></i>上海</h2>
                                    <p>东方明珠</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        </div>
    </section>
    <section class="city_ranklist margin-top">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h2>
                        排行榜·资讯
                    </h2>
                </div>
                <div class="row ">
                    <div class=" col-xs-6 col-sm-6 col-md-3 text-left">
                        <h3>城市排行榜top10</h3>
                        <div class="city-list">
                            <p>1 三亚 </p>
                            <p>2 上海</p>
                            <p>3 深圳</p>
                            <p>4 大理 <i class="fa fa-arrow-up up"></i></p>
                            <p>5 杭州</p>
                            <p>6 成都 <i class="fa fa-arrow-up up"></i></p>
                            <p>7 苏州 <i class="fa fa-arrow-down down"></i></p>
                            <p>8 西安</p>
                            <p>9 丽江 <i class="fa fa-arrow-down down"></i></p>
                            <p>10 青海</p>
                        </div>
                    </div>

                    <div class="col-xs-6 col-sm-6 col-md-3 text-left">
                        <h3>人文景观top10</h3>
                        <div class="city-list">
                            <p>1 平遥古城 <i class="fa fa-arrow-up up"></i></p>
                            <p>2 丽江古城</p>
                            <p>3 西街</p>
                            <p>4 凤凰古城</p>
                            <p>5 皇城相府</p>
                            <p>6 阆中古城</p>
                            <p>7 大理古城 <i class="fa fa-arrow-down down"></i></p>
                            <p>8 镇北堡西部影视城</p>
                            <p>9 束河古镇</p>
                            <p>10 兴城古城</p>
                        </div>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-3 text-left">
                        <h3>人气排行榜top10</h3>
                        <div class="city-list">
                            <p>1 西安 </p>
                            <p>2 北京</p>
                            <p>3 成都 <i class="fa fa-arrow-down down"></i></p>
                            <p>4 扬州 <i class="fa fa-arrow-up up"></i></p>
                            <p>5 重庆 <i class="fa fa-arrow-up up"></i></p>
                            <p>6 贵州</p>
                            <p>7 武汉 <i class="fa fa-arrow-down down"></i></p>
                            <p>8 青海</p>
                            <p>9 厦门</p>
                            <p>10 大理</p>
                        </div>
                    </div>
                    <div class="col -xs-6 col-sm-6 col-md-3 text-left">
                        <h3>最新资讯</h3>
                        <p class="ell"><a href="https://www.xwkx.net/Trave/1/162818.html" ><i
                                    class="fa fa-chevron-right"></i> 第四届怀宁国际蓝莓文化旅游节隆重开幕</a></p>
                        <p class="ell"><a href="https://www.xwkx.net/Trave/1/163955.html" ><i
                                    class="fa fa-chevron-right"></i>
                                璞富腾酒店及度假村甄选精彩旅行入住体验开启2020跨省之旅</a></p>
                        <p class="ell"><a href="https://www.xwkx.net/Trave/1/163609.html" ><i
                                    class="fa fa-chevron-right"></i>
                                后疫情时代最受期待的76种风景名单出炉,古北水镇高居全国之首</a></p>
                        <p class="ell"><a href="https://www.xwkx.net/Trave/1/163340.html" i
                                    class="fa fa-chevron-right"></i> 燃爆苏城！乐享美食季正式开幕</a></p>
                        <p class="ell"><a href="https://www.xwkx.net/Trave/1/163594.html" ><i
                                    class="fa fa-chevron-right"></i> 泾源杨岭村：习近平总书记来过的这个村子，红红火火！</a></p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="scenery margin-top">
        <div class="container">
           <div class="row">
               <div class=" col-md-12 text-center">
                    <h2>打卡网红地</h2>
                    <div class="row">
                        <div class="col-sm-12 col-md-3 area area1 margin-top ">
                            <img src="../images/citysearch/whd1.png" alt="">
                            <div class="text text-left">
                                <h2>西安</h2>
                                <p>西安是国务院公布的首批国家历史文化名城，历史上先后有十多个王朝在此建都，是世界四大古都之一</p>
                            </div>
                            <div class="mask1">
                            <div class="mask"></div>
                        </div>
                        </div>
                        <div class="col-sm-12 col-md-3 area area2 margin-top ">
                            <img src="../images/citysearch/whd2.jpg" alt="">
                            <div class="text text-left">
                                <h2>茶卡盐湖</h2>
                                <p>茶卡盐湖与塔尔寺、青海湖、孟达天池齐名，是“青海四大景”之一，被旅行者们称为中国“天空之镜”</p>
                            </div>
                            <div class="mask1">
                            <div class="mask"></div>
                        </div>
                        </div>
                        <div class="col-sm-12 col-md-3 area area2 margin-top ">
                            <img src="../images/citysearch/whd3.jpeg" alt="">
                            <div class="text text-left">
                                <h2>亚丁稻城</h2>
                                <p>它的景致保持着在地球上近绝迹的纯粹，因其独特的地貌和原生态的自然风光，被誉为“香格里拉之魂”</p>
                            </div>
                            <div class="mask1">
                            <div class="mask"></div>
                        </div>
                        </div>
                        <div class="col-sm-12 col-md-3 area area2 margin-top ">
                            <img src="../images/citysearch/whd4.jpeg" alt="">
                            <div class="text text-left">
                                <h2>泸沽湖</h2>
                                <p>泸沽湖素有“高原明珠”之称，水天一色，清澈如镜。泸沽湖，此生必去一次的地方。</p>
                            </div>
                            <div class="mask1">
                            <div class="mask"></div>
                        </div>
                        </div>
                   
                        <div class="col-sm-12  col-md-3  area margin-top area2">
                            <img src="../images/citysearch/whd5.png" alt="">
                            <div class="text text-left">
                                <h2>凌波栈道</h2>
                                <p>凌波栈道位于武汉大学凌波门外的东湖岸边。湖水高的时候与栈道齐平，远远望去，人仿佛直接在水面上行走。</p>
                            </div>
                            <div class="mask1">
                            <div class="mask"></div>
                        </div>
                        </div>
                        <div class="col-sm-12 col-md-3 area margin-top area2">
                            <img src="../images/citysearch/whd6.jpg" alt="">
                            <div class="text text-left">
                                <h2>浮云牧场</h2>
                                <p>浮云牧场是典型的高半山，利用西山村海拔2600米以上已经废弃的部分荒坡荒地建造，推门见山，浮云如海。</p>
                            </div>
                            <div class="mask1">
                            <div class="mask"></div>
                        </div>
                        </div>
                        <div class="col-sm-12 col-md-3 area margin-top area2">
                            <img src="../images/citysearch/whd7.jpg" alt="">
                            <div class="text text-left">
                                <h2>阿那亚</h2>
                                <p>阿那亚黄金海岸社区是一个全资源滨海旅游度假综合体社区，坐落于河北省秦皇岛昌黎县黄金海岸中区，是北中国一线亲海的全资源玩家胜地。</p>
                            </div>
                            <div class="mask1">
                            <div class="mask"></div>
                        </div>
                        </div>
                    </div>
               </div>
           </div>
    </section>
    <section class="recommend margin-top">
        <div class="container">
            <dov class="row">
                <div class="col-md-12 text-center">
                    <h2>网友推荐</h2>
                    <div class="row">
                        <div class="col-sm-12  col-md-3 note padding">
                            来四川不去峨眉山乐山，就像去北京不去长城一样，可以说非常有名了。峨眉山金顶的寺庙很出名，信佛的朋友可以去拜拜。乐山大佛照片里感觉不出来，只有到了它的脚下才能感觉到那种震撼。</div>
                        <div class="col-sm-12  col-md-3 col-md-offset-2 mome padding">
                            熊猫基地、宽窄巷子、锦里、武侯祠、杜甫草堂。武侯祠的网红拍照景点红墙竹影，熊猫基地的萌萌熊猫小可爱，宽窄巷子悠闲慢生活，锦里的美食，诗人杜甫的杜甫草堂，都是来成都不可错过的景点。
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12  col-md-3 col-md-offset-3 sticky padding">
                            九寨沟、黄龙是四川景区中看点最强的两大景区，九寨沟的水可以用人间瑶池来形容一点都不为过，小学语文课本中五彩池就在这个地方，这里的美景真的让人流连忘返。</div>
                        <div class="col-sm-12  col-md-3 col-md-offset-1 note padding">
                            强烈推荐杭州西湖，真的很美很美，一天是走不完的，断桥很长，无法形容的美</div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 col-md-3 col-md-offset-2 NOTES padding">
                            六天云南bai之旅即将结束，怀着du一份留恋，对此行的导游马骏同志的导游工作非常满意，几天来小马不但生活起居照顾的无微不至，同时充分发挥了自己的熟练的业务专长，领略了云南的风土人情以及云南的美丽风光，其真诚质朴乐观开朗的性格让云南之旅充满了欢乐，也云南充满留恋，以后还会来!云南再见!。
                        </div>
                        <div class="col-sm-12 col-md-3 col-md-offset-4 mome padding">
                            六天云南bai之旅即将结束，怀着du一份留恋，对此行的导游马骏同志的导游工作非常满意，几天来小马不但生活起居照顾的无微不至，同时充分发挥了自己的熟练的业务专长，领略了云南的风土人情以及云南的美丽风光，其真诚质朴乐观开朗的性格让云南之旅充满了欢乐，也云南充满留恋，以后还会来!云南再见!。
                        </div>
                    </div>
                </div>

        </div>
        </dov>
        </div>
    </section>
    <footer class="margin-top">
        <div class="container">
            <div class="row">
                <div class="footer_btn col-xs-12 margin-bottom">
                    <ul class="col-xs-12 padding-tb-10">
                        <li class="col-xs-3"><a href="../index.html"> 首页 </a></li>
                        <li class="col-xs-3"><a href="../page/location.html"> 旅游城市 </a></li>
                        <li class="col-xs-3"><a href="../page/type.html"> 各色美景 </a></li>
                        <li class="col-xs-3"><a href="../page/card.html"> 打卡胜地 </a></li>
                    </ul>
                </div>

                <div class="cont">    
                    <div class="col-sm-4">
                        <img src="../images/header/logo.png" alt="">
                        <h4>你说的都队</h4>
                    </div>
                    <div class="col-sm-4" style="font-size: 10px;">
                        <p>扫码关注官方微信公众号</p>
                        <p>带你感受中国的美</p>
                        <img src="../images/header/code.jpg" alt="" style="width: 20%;height: 20%;padding: 5px;background-color: white;">
                    </div>
                    <div class="col-sm-4" style="font-size: 30px;">
                        <p class="fa fa-home"><span style="font-size: 12px;">&nbsp&nbsp成都市xxx区xxx广场xxx号楼</span></p>
                        <p class="fa fa-envelope-o"><span style="font-size: 12px;">&nbsp&nbsp0000000000@qq.com</span></p>
                        <p class="fa fa-phone"><span style="font-size: 12px;">&nbsp&nbsp888-888-888</span></p>
                    </div>
                </div>
            </div>
        </div>
    </footer>
  
</body>

</html>